<template>
	<div class="moviedetails-wrapper">
		<h2>电影详情</h2>
		<el-row>
			<el-col :span="18">
				<video width="100%" height="100%" :src="movice_details.flash" controls="controls">
					您的浏览器不支持 video 标签。
				</video>
			</el-col>
			<el-col :span="6">
				<el-row>
					<el-col :span='8'>
						<ul class="text-right">
							<li>电影名称</li>
							<li>导演</li>
							<li>国家</li>
							<li>语言</li>
							<li>上映年份</li>
						</ul>
					</el-col>
					<el-col :span="14" :offset='2'>
						<ul class="text-left">
							<li>{{movice_details.title}}</li>
							<li>{{movice_details.doctor}}</li>
							<li>{{movice_details.country}}</li>
							<li>{{movice_details.language}}</li>
							<li>{{movice_details.year}}</li>
						</ul>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<div class="summary-box">
			<h4>简介</h4>
			<div>{{movice_details.summary}}</div>
		</div>
	</div>
</template>

<script>
	const request = require('@/api/movies.js')
	export default {
		name: 'moviedetails',
		data() {
			return {
				movice_details: '',
			}
		},
		created() {
			this.doRequestgetmovies()
		},
		methods: {
			doRequestgetmovies() {
				const id = this.$route.params.id
				if(!id) return this.$message.error('id参数错误')
				request.getmovies({
					id: id
				}).then(res => {
					console.log(res)
					this.movice_details = res.data
				})

			}
		},
	}
</script>

<style>

</style>